<!-- 演出详情 -->
<template>
	<view class="container">
		<!--    <productConSwiper :imgUrls="imgUrls"></productConSwiper>-->
		<view class="swiper banner" >
			<!-- /:autoplay="true" -->
			<swiper indicator-dots="true"  :circular="circular" :interval="interval"
				:duration="duration" :autoplay="autoplay" indicator-color="#E4E4E4" indicator-active-color="#E93323" :current="swiperCur"
				@change="swiperChange">
				<block v-if="bannersVideos.length">
					<swiper-item v-for="(item, index) in bannersVideos">
						<video
							:src="item"
							controls></video>
					</swiper-item>
				</block>
				<block v-if="bannerImgs.length">
					<block v-for="(item, index) in bannerImgs" :key="index">
						<swiper-item :class="{ active: index == swiperCur }">
							<image :src="item" class="slide-image" mode="aspectFill"></image>
						</swiper-item>
					</block>
				</block>

			</swiper>
			<view class="current-box">
				{{current>bannersVideos.length?'图片':'视频'}}{{current}}/{{bannersVideos.length+bannerImgs.length}}
			</view>
			<!-- <image class="bg" src="/static/2images/2_9.png"></image> -->
		</view>

		<view class="info">
			<view>
				<view class="name">{{ detail.title }}</view>
				<view class="desc">{{detail.remark}}</view>
				<view class="price">
					￥{{ detail.price_min!=null?detail.price_min:'0.0' }}-{{detail.price_max!=null?detail.price_max:'0.0'}}
				</view>
			</view>


		</view>
		<view class="card-box">
			<view class="attribute acea-row row-between-wrapper">
				<view class="acea-row row-between-wrapper">
					<text>演出时间</text>
					<text class="atterTxt"  v-if="detail.is_open == '1'">{{ detail.show_time }}</text>
					<text class="atterTxt"  v-if="detail.is_open == '0'">暂未开放</text>
				</view>
			</view>
			<view class="attribute acea-row row-between-wrapper">
				<view class="acea-row row-between-wrapper">
					<text>演出地址</text>
					<text class="atterTxt">{{ detail.address }}</text>
				</view> 
			</view>
		</view>

		
		<view class="card-box">
			<view class="notice-title">
				<view class="title" :class="{'title-selected':(showType == 1)}" @click="changeContent(1)" v-show="know != ''">购票须知</view>
				<view class="title" :class="{'title-selected':(showType == 2)}" @click="changeContent(2)" v-show="(detail.content && detail.content!='')">节目简介</view>
			</view>
			<view class="content">
				<template v-if="showType == 1">
					<jyf-parser :domain="domain" :html="know" ref="article"
						:tag-style="tagStyle" v-show="know != ''"></jyf-parser>
				</template>
				<template v-else>
					<jyf-parser :domain="domain" :html="detail.content" ref="article"
						:tag-style="tagStyle" v-show="(detail.content && detail.content!='')"></jyf-parser>
				</template>
			</view>
		</view>
		<!-- <view class="card-box">
			<view class="notice-title">演出详情</view>
			<view class="content" v-if="detail.content">
				<jyf-parser :domain="domain" :html="detail.content" ref="article"
					:tag-style="tagStyle"></jyf-parser>
			</view>
		</view> -->


		<view style="height: 80px; " v-if="showBuy && detail.is_open == '1'"></view>
		<view class="bnt acea-row fixed-bottom" v-if="showBuy && detail.is_open == '1'">
			<view class="buy btns bgcor" @click="onSubmit">开始购票</view>
		</view>
		<uni-popup ref="popnotice" class="popup-cls2"  :mask-click="false">
			<view class="pop-info">
				<view class="pop-top">
					购票须知
				</view>
				<view class="center"> 
					<scroll-view class="pop-content" scroll-y="true" @scrolltolower="scrollBottom">
						<view class="testclas">
							<jyf-parser :domain="domain" :html="know" ref="article"
								:tag-style="tagStyle" ></jyf-parser>
						</view>
					</scroll-view>
				</view>
				<view class="bottom">
					<view class="agree-btn"  v-if="showConfirm == false">向上滑动阅读须知</view>
					<view class="agree-btn btn-selected" @click="confirmRead" v-if="showConfirm == true">已阅读</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" class="popup-cls" @change="changePop">
			<view class="pop-info">
				<view class="pop-top">
					选择场次
				</view>
				<view class="center"> 
					<scroll-view class="pop-content" scroll-y="true">
						<view class="testclas">
							<view v-for="(item,index) in section" :key="index" @click="selectSection(item)" class="section" :class="{'background-selected':(section_id == item.id)}">{{item.title}}</view>
						</view>
					</scroll-view>
				</view>
				<view class="bottom">
					<view class="agree-btn" @click="confirmSection" :class="{'btn-selected':(section_id != '')}">确认选择</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import productConSwiper from "@/components/productConSwiper/index.vue";
	import {
		HTTP_REQUEST_URL
	} from "@/config/app";
	import {
		show_detail
	} from "@/api/show";
	const app = getApp();
	export default {
		components: {
			productConSwiper
		},
		data() {
			return {
				id: '',
				imgUrls: [],
				domain: HTTP_REQUEST_URL,
				description: '',
				tagStyle: {
					img: "width:100%;display:block;",
				},
				detail: {},
				swiperCur: 0,
				circular: true,
				autoplay: false,
				interval: 3000,
				duration: 500,
				showConfirm:false,
				current: 1,
				showBuy: app.globalData.temp_status != 1,
				section:[{
					'title':'4月25日场',
					'id':1
				},{
					'title':'4月27日场',
					'id':2
				},{
					'title':'4月29日场',
					'id':3
				},{
					'title':'4月31日场',
					'id':4
				},{
					'title':'5月1日场',
					'id':5
				},{
					'title':'5月2日场',
					'id':6
				}],
				section_id:'',
				section_title:'',
				section_start_time:'',
				showType:1,//1显示显示须知 2演出详情
				know:'',
				is_discount:'1',//是否打折
			};
		},
		computed: {
			bannersVideos() {
				if (JSON.stringify(this.detail) != '{}') {
					if (this.detail.video) {
						return [this.detail.video]
					}
				}
				return []
			},
			bannerImgs() {
				if (JSON.stringify(this.detail) != '{}') {
					let bs = this.detail.banner.split(",")
					return bs
				}
				return []

			}
		},
		onLoad(options) {
			this.id = options.id;
			let that = this;
			show_detail(this.id).then(res => {
				that.detail = res.data.info;
				that.section = res.data.list;
				that.know = that.detail.know;
			})
		},
		methods: {
			confirmRead(){
				this.$refs.popnotice.close();
				this.$refs.popup.open('center');
			},
			scrollBottom(e){
				console.info(e);
				this.showConfirm = true;
			},
			changeContent(type){
				this.showType = type;
			},
			changePop(e){
				if(!e.show){
					this.section_id = '';
					this.section_title = "";
				}
			},
			swiperChange(e) {
				this.current = e.detail.current + 1
				// console.log(e.detail.current);
			},
			onSubmit() {
				this.$refs.popup.open('center');
				
				return;
				// if(this.detail.type == '1'){
				// 	uni.navigateTo({
				// 		url: `/pages/2_development/show_buy_ticket/seat_selection?id=${this.id}&title=${this.detail.title}&remark=${this.detail.remark}&start_time=${this.detail.start_time}`
				// 	})
				// }else{
					
				// 	this.$refs.popup.open('center')
				// }
			},
			selectSection(item){
				console.info(item)
				this.section_id = item.id;
				this.section_title = item.title;
				this.section_start_time = item.start_time;
				this.is_discount = item.is_discount;
			},
			//确认场次
			confirmSection(){
				if(this.section_id == ''){
					return;
				}
				// uni.navigateTo({
				// 	url: `/pages/2_development/show_buy_ticket/subscribe/selectdate?id=${this.id}&title=${this.detail.title}&remark=${this.detail.remark}&start_time=${this.detail.start_time}`
				// })
				console.info(`/pages/2_development/show_buy_ticket/seat_selection?id=${this.id}&title=${this.detail.title}&remark=${this.detail.remark}&start_time=${this.section_start_time}&section_id=${this.section_id}&section_title=${this.section_title}&is_discount=${this.is_discount}`);
				let url = `/pages/2_development/show_buy_ticket/seat_selection?id=${this.id}&title=${this.detail.title}&remark=${this.detail.remark}&start_time=${this.section_start_time}&section_id=${this.section_id}&section_title=${this.section_title}&is_discount=${this.is_discount}`;
				this.$refs.popup.close();
				uni.navigateTo({
					url: url
				});
			}
		}
	};
</script>

<style lang="scss">
	@import "../../index/style/main.scss";

	.container {
		background-color: #F5F5F5;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
	}

	.banner {
		height: 213px;
		width: 100%;
		position: relative;

		swiper {
			height: 100%;
			width: 100%;

			image,
			video {
				width: 100%;
				height: 100%;
			}

		}

		.current-box {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			background: rgba(0, 0, 0, .24);
			color: #fff;
			border-radius: 30px;
			padding: 2px 6px;
			font-size: 12px;
		}

	}

	.bnt {
		margin: 30rpx;
		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	}

	.btns {
		text-align: center;
		line-height: 76rpx;
		color: #fff;
		font-size: 28rpx;
	}
	.bgcor{
		background-color: #01A1ED;
	}

	.joinCart {
		flex: 1;
		border-radius: 50rpx 0 0 50rpx;
		background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
	}

	.buy {
		flex: 1;

		border-radius: 50rpx;
		// background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
	}

	.users {
		padding-left: 30rpx;
		flex-wrap: wrap;
		/* #ifdef MP */
		margin-top: 0;
		/* #endif */
		/* #ifdef H5 */
		margin-top: 0;

		/* #endif */
		.avatar {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 30%;
			margin-right: 3%;
			margin-top: 20rpx;

			height: 80rpx;
			width: 80rpx;
			border-radius: 40rpx;
			background: #eee;

			&.active {
				background: #999;
				color: #fff;
			}
		}
	}

	.attribute {
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 26rpx;
		color: #82848f;
		height: 90rpx;
		position: relative;
	}

	.atterTxt {
		font-size: 28rpx;
		color: #282828;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
		// width: 400rpx;
		margin-left: 20rpx;
	}


	.info {
		position: relative;
		background: #fff;
		padding: 20rpx 0;

		.name {
			margin: 20rpx 30rpx 0;
			font-size: 32rpx;
			font-weight: 700;
		}

		.price {
			margin: 20rpx;
			color: red;
			font-size: 28rpx;
		}

		.score {
			height: 50rpx;
		}

		.desc {
			margin: 0 30rpx;
			font-size: 26rpx;
			color: #82848f;
			margin-top: 10rpx;
		}

		.shoucang {
			font-size: 18rpx;
			text-align: center;
			color: #666;
			position: absolute;
			top: 10rpx;
			right: 30rpx;
		}
	}

	.card-box {
		background-color: #fff;
		margin-top: 20rpx;

		.acea-row {
			display: flex;
			justify-content: space-between;
			width: 100%;

			.atterTxt {
				flex: 1;
				padding: 20rpx 0;
				text-align: right;
			}
		}
	}

	.notice-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 20rpx;
		margin-top: 40rpx;
		
		.title{
			font-size: 28rpx;
			color: #333;
			padding: 30rpx;
		}
		.title-selected{
			font-weight: bold;
			font-size: 30rpx;
			color: #FF3700;
		}
	}

	.content {
		margin: 0 30rpx;
		padding: 0rpx 0rpx 40rpx 0rpx;
	}
	
	/** 须知弹窗 **/
	.popup-cls2{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		.pop-info{
			width:90%;
			background-color: white;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			margin: 0 auto;
			.pop-top{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #000000;
				font-weight: bold;
				margin-top: 20rpx;
				text-align: center;
				height: 40rpx;
			}
		}
		
		.center{
			height: 500rpx;
			width:90%;
			margin: 30rpx;
			.pop-content{
				height: 500rpx;
				flex:1;
				.testclas{
					flex:1;
					display: flex;
					flex-direction: row;
					flex-wrap:wrap;
					justify-content: space-between;
				}
			}
		}
		
		.bottom{
			display: flex;
			flex-direction: row;
			justify-content: center;
			.agree-btn{
				flex: 1;
				margin-left: 40rpx;
				margin-right: 40rpx;
				height:80rpx;
				border-radius: 40rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
				margin-bottom: 30rpx;
				background-color: #A1A1A1;
			}
			.btn-selected{
				background-color: #01A1ED;
			}
		}
		
	}
	/****/
	
	.popup-cls{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.pop-info{
		width:90%;
		background-color: white;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		margin: 0 auto;
	}
	.pop-top{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #000000;
		font-weight: bold;
		margin-top: 20rpx;
		text-align: center;
		height: 40rpx;
	}
	
	.center{
		height: 300rpx;
		width:90%;
		margin: 30rpx;
	}
	.center2{
		height: 500rpx;
		width:90%;
		margin: 30rpx;
	}
	.pop-content{
		height: 300rpx;
		flex:1;
		// flex-direction: row;
	}
	
	.testclas{
		flex:1;
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
		justify-content: space-between;
	}
	.section{
		color: black;
		border: 1px solid #f5f6f6;
		background-color:#f5f6f6;
		height: 70rpx;
		width: 45%;
		text-align: center;
		line-height: 70rpx;
		margin: 10rpx 0rpx;
		border-radius: 35rpx;
	}
	.background-selected{
		border: 1px solid #01A1ED;
	} 
	
	.background-none{
		background-color: #CCCCCC;
		color:#A1A1A1;
	}
	.bottom{
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.agree-btn{
		flex: 1;
		margin-left: 40rpx;
		margin-right: 40rpx;
		height:80rpx;
		border-radius: 40rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		margin-bottom: 30rpx;
		background-color: #A1A1A1;
	}
	.btn-selected{
		background-color: #01A1ED;
	}
</style>
